<template>
  <div class="resume-basic-form">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      @submit.prevent
    >
      <div class="form-section">
        <h3 class="section-title">个人信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="简历标题" prop="title">
              <el-input 
                v-model="formData.title"
                placeholder="例如：前端开发工程师简历"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input 
                v-model="formData.name"
                placeholder="请输入您的真实姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input 
                v-model="formData.phone"
                placeholder="请输入手机号码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input 
                v-model="formData.email"
                placeholder="请输入常用邮箱"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="formData.birthday"
                type="date"
                placeholder="请选择出生日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select 
                v-model="formData.gender"
                placeholder="请选择性别"
                style="width: 100%"
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
                <el-option label="保密" value="保密" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在城市" prop="location">
              <el-input
                v-model="formData.location"
                placeholder="请输入所在城市，如：北京市"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作年限" prop="experience">
              <el-select 
                v-model="formData.experience"
                placeholder="请选择工作年限"
                style="width: 100%"
              >
                <el-option label="应届生" value="应届生" />
                <el-option label="1年以内" value="1年以内" />
                <el-option label="1-3年" value="1-3年" />
                <el-option label="3-5年" value="3-5年" />
                <el-option label="5-10年" value="5-10年" />
                <el-option label="10年以上" value="10年以上" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="form-section">
        <h3 class="section-title">求职期望</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="当前状态" prop="currentStatus">
              <el-select 
                v-model="formData.currentStatus"
                placeholder="请选择当前状态"
                style="width: 100%"
              >
                <el-option label="在职" value="在职" />
                <el-option label="离职" value="离职" />
                <el-option label="应届生" value="应届生" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望薪资" prop="expectSalary">
              <el-select 
                v-model="formData.expectSalary"
                placeholder="请选择期望薪资"
                style="width: 100%"
              >
                <el-option label="面议" value="面议" />
                <el-option label="3k以下" value="3k以下" />
                <el-option label="3-5k" value="3-5k" />
                <el-option label="5-10k" value="5-10k" />
                <el-option label="10-15k" value="10-15k" />
                <el-option label="15-20k" value="15-20k" />
                <el-option label="20-30k" value="20-30k" />
                <el-option label="30-50k" value="30-50k" />
                <el-option label="50k以上" value="50k以上" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望城市" prop="expectLocation">
              <el-input
                v-model="formData.expectLocation"
                placeholder="请输入期望城市，如：上海市"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

// 定义emit
const emit = defineEmits(['update:modelValue'])

// 表单ref
const formRef = ref(null)

// 表单数据
const formData = ref({
  title: '',
  name: '',
  phone: '',
  email: '',
  birthday: '',
  gender: '',
  location: '',
  experience: '',
  currentStatus: '',
  expectSalary: '',
  expectLocation: '',
  ...props.modelValue
})

// 表单校验规则
const formRules = {
  title: [
    { required: true, message: '请输入简历标题', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  birthday: [
    { required: true, message: '请选择出生日期', trigger: 'change' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请输入所在城市', trigger: 'change' }
  ],
  experience: [
    { required: true, message: '请选择工作年限', trigger: 'change' }
  ],
  currentStatus: [
    { required: true, message: '请选择当前状态', trigger: 'change' }
  ],
  expectSalary: [
    { required: true, message: '请选择期望薪资', trigger: 'change' }
  ],
  expectLocation: [
    { required: true, message: '请输入期望城市', trigger: 'change' }
  ]
}

// 城市选项（示例数据）
const cityOptions = [
  {
    value: 'beijing',
    label: '北京',
    children: [
      {
        value: 'chaoyang',
        label: '朝阳区'
      },
      {
        value: 'haidian',
        label: '海淀区'
      }
    ]
  },
  {
    value: 'shanghai',
    label: '上海',
    children: [
      {
        value: 'pudong',
        label: '浦东新区'
      },
      {
        value: 'huangpu',
        label: '黄浦区'
      }
    ]
  }
]

// 监听表单数据变化
watch(formData, (newValue) => {
  emit('update:modelValue', {
    title: newValue.title,
    name: newValue.name,
    phone: newValue.phone,
    email: newValue.email,
    birthday: newValue.birthday,
    gender: newValue.gender,
    location: newValue.location,
    experience: newValue.experience,
    currentStatus: newValue.currentStatus,
    expectSalary: newValue.expectSalary,
    expectLocation: newValue.expectLocation
  })
}, { deep: true })

// 表单验证
const validate = async () => {
  if (!formRef.value) return false
  try {
    await formRef.value.validate()
    return true
  } catch (error) {
    return false
  }
}

// 暴露方法给父组件
defineExpose({
  validate
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.css';

.resume-basic-form {
  .form-section {
    margin-bottom: var(--spacing-xl);
    
    .section-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: var(--spacing-lg);
      padding-bottom: var(--spacing-xs);
      border-bottom: 1px solid var(--border-color);
    }
  }
  
  :deep(.el-form-item__label) {
    font-weight: 500;
  }
}
</style> 